import './Visit.less';
import { Chart, Tooltip, Legend, Point, Line, Interval } from 'bizcharts';
import { useState, useEffect } from 'react';
import { selectAll } from '../../..//Api/Api';
export default function Visit() {
  const [data, setData] = useState<any[]>([]);
  useEffect(() => {
    selectAll({}).then((res) => {
      let obj = {};
      res.data.map((item) => {
        let date = '';
        date = item.createdAt.split('T')[0];
        if (!obj[date]) {
          obj[date] = [item.totalOrder];
        } else {
          obj[date].push(item.totalOrder);
        }
      });
      for (const key in obj) {
        const res = obj[key].reduce((value, item) => {
          return (value += item);
        });
        obj[key] = { value: res, count: obj[key].length };
      }
      let arr = [];
      for (const key in obj) {
        let object1 = {
          date: key,
          name: '订单金额',
          订单金额: obj[key].value,
          订单数量: obj[key].count,
        };
        arr.push(object1);
      }
      setData(arr);
    });
  }, []);
  let chartIns = null;
  const scale = {
    people: {
      min: 0,
      tickCount: 4,
      alias: '人数',
      type: 'linear-strict',
    },
    waiting: {
      min: 0,
      tickCount: 4,
      alias: '等待',
      type: 'linear-strict',
    },
  };
  const colors = ['#6394f9', '#62daaa'];
  return (
    <div className="Visit">
      <Chart
        scale={scale}
        autoFit
        height={400}
        data={data}
        onGetG2Instance={(chart) => {
          chartIns = chart;
          chartIns.on('interval:mouseenter', (e) => {
            console.log(chartIns);
            chartIns.geometries.forEach((g) => {
              if (g.type === 'interval') {
                (g.getShapes() || []).forEach((s) => {
                  s.set('origin_fill', s.get('attrs').fill);
                  s.attr('fill', 'red');
                });
              }
            });
          });
          chartIns.on('interval:mouseleave', (e) => {
            console.log(chartIns);
            chartIns.geometries.forEach((g) => {
              if (g.type === 'interval') {
                (g.getShapes() || []).forEach((s) => {
                  s.attr('fill', s.get('origin_fill'));
                });
              }
            });
          });
        }}
      >
        <Legend
          custom={true}
          allowAllCanceled={true}
          items={[
            {
              value: 'count',
              name: '订单数量',
              marker: {
                symbol: 'square',
                style: { fill: colors[0], r: 5 },
              },
            },
            {
              value: 'value',
              name: '订单金额',
              marker: {
                symbol: 'hyphen',
                style: { stroke: colors[1], r: 5, lineWidth: 3 },
              },
            },
          ]}
          onChange={(ev) => {
            const item = ev.item;
            const value = item.value;
            const checked = !item.unchecked;
            const geoms = chartIns.geometries;

            for (let i = 0; i < geoms.length; i++) {
              const geom = geoms[i];

              if (geom.getYScale().field === value) {
                if (checked) {
                  geom.show();
                } else {
                  geom.hide();
                }
              }
            }
          }}
        />
        <Tooltip shared />
        <Interval position="date*订单数量" color={colors[0]} />
        <Line
          position="date*订单金额"
          color={colors[1]}
          size={3}
          shape="smooth"
        />
        <Point
          position="date*订单金额"
          color={colors[1]}
          size={3}
          shape="circle"
        />
      </Chart>
    </div>
  );
}
